<template>
	<view class="flex flex-align-center">
		<block v-for="(item, index) in star" 
				:key="index">
			<image
				v-if="starNum >= item"
				src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/home/star_bg2.png" mode=""
			></image>
			<image v-else src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/home/star_bg1.png" mode=""></image>
		</block>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	const props = defineProps({
		starNum: {
			type: Number,
			default: 0
		}
	})
	
	const star = ref([1, 2, 3, 4, 5])
</script>

<style lang="scss" scoped>
	image {
		width: 26rpx;
		height: 26rpx;
		margin-right: 10rpx;
	}
</style>
